<template>
	<div id="viewDiv" class="h-screen w-full"></div>
</template>

<script setup>
	import { onMounted } from 'vue'
	
	import geosceneConfig from '@geoscene/core/config'
	import Map from '@geoscene/core/Map'
	
	import MapView from '@geoscene/core/views/MapView'
	
	import ScaleBar from '@geoscene/core/widgets/ScaleBar'
	import Legend from '@geoscene/core/widgets/Legend'
	
	import SceneView from '@geoscene/core/views/SceneView'
	
	//geosceneConfig.assetsPath = './assets'
	let view, map
	
	onMounted(() => {
	  map = new Map({
			//basemap: basemapBlue_ArcGIS,
			basemap: "tianditu-image",
			//basemap: "tianditu-vector",
			ground: "world-elevation"
	  });
	  
	  // const view = new MapView({
	  //     map: map,
	  //     center: [111.4, 37.9], // Longitude, latitude
	  //     zoom: 4, // Zoom level
	  //     container: "viewDiv" // Div element
	  // });
	  const view = new SceneView({
		  container: "viewDiv",
		  map: map,
		  camera: {
			  position: {
				  x: 128.0522605138008, //Longitude
				  y: 41.847540077153155, //Latitude
				  z: 9260 //Meters
			  },
			  tilt: 65
		  }
	  });
	  
	  const scalebar = new ScaleBar({
	      view: view  
	  });	  
	  view.ui.add(scalebar, "bottom-left");
	  
	  const legend = new Legend ({
	      view: view
	  });
	  view.ui.add(legend, "top-right");	  
	
	})
</script>

<style scoped>
	/* @import "https://js.geoscene.cn/4.29/@geoscene/core/assets/geoscene/themes/light/main.css"; */
	html,
	body,
	#viewDiv {
		padding: 0;
		margin: 0;
		height: 100%;
		width: 100%;
	}
</style>